<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="40" height="40"
    style="shape-rendering: auto; display: block; background: rgba(255, 255, 255, 0);"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
      <circle fill="#ff0011" r="10" cy="50" cx="84">
        <animate begin="0s" keySplines="0 0.5 0.5 1" values="10;0" keyTimes="0;1" calcMode="spline" dur="1s"
          repeatCount="indefinite" attributeName="r"></animate>
        <animate begin="0s" values="#ff0011;#ff0000;#ff0000;#ff0000;#ff0011" keyTimes="0;0.25;0.5;0.75;1"
          calcMode="discrete" dur="4s" repeatCount="indefinite" attributeName="fill"></animate>
      </circle>
      <circle fill="#ff0011" r="10" cy="50" cx="16">
        <animate begin="0s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10"
          keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="r"></animate>
        <animate begin="0s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84"
          keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="cx"></animate>
      </circle>
      <circle fill="#ff0000" r="10" cy="50" cx="50">
        <animate begin="-1s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10"
          keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="r"></animate>
        <animate begin="-1s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84"
          keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="cx"></animate>
      </circle>
      <circle fill="#ff0000" r="10" cy="50" cx="84">
        <animate begin="-2s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10"
          keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="r"></animate>
        <animate begin="-2s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84"
          keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="cx"></animate>
      </circle>
      <circle fill="#ff0000" r="10" cy="50" cx="16">
        <animate begin="-3s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10"
          keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="r"></animate>
        <animate begin="-3s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84"
          keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="cx"></animate>
      </circle>
      <g></g>
    </g>
  </svg>
</template>